<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级表白</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
            padding-top: 50px;
        }
        h1 {
            color: #ff69b4;
            font-size: 36px;
            margin-bottom: 20px;
        }
        p {
            color: #333;
            font-size: 20px;
            margin-bottom: 30px;
        }
        .love-heart {
            width: 150px;
            height: 150px;
            cursor: pointer;
        }
        .love-quote {
            font-style: italic;
            color: #ff69b4;
            font-size: 24px;
            margin-top: 30px;
        }
        .love-message {
            font-size: 18px;
            color: #333;
            margin-top: 20px;
            line-height: 1.5;
            opacity: 0;
        }
    </style>
</head>
<body>
    <h1>亲爱的，我有话对你说...</h1>
    <p>我一直想告诉你，我对你的感情是多么的深刻...</p>
    <svg class="love-heart" viewBox="0 0 32 29.6" xmlns="http://www.w3.org/2000/svg">
        <path fill="#ff69b4" d="M16 28.8c-.4 0-.9-.2-1.2-.6L.5 13.3C.1 12.9 0 12.4 0 12c0-1.4.9-2.6 2.2-3.1L16 1.4l13.8 7.5c1.3.7 2.2 1.9 2.2 3.1s-.4 2.2-1.2 2.7l-14.3 14.9c-.3.4-.8.6-1.3.6zM2.4 10.4L16 3.1l13.6 7.3L16 18.6 2.4 10.4zm13.6 18.2c-.3 0-.7-.2-.9-.4L4.1 15.3c-.2-.2-.3-.5-.3-.8 0-.6.5-1.2 1.1-1.5l10.5-5.7v17.6c-.2.1-.4.1-.6.1z"/>
    </svg>
    <p class="love-quote">“爱是生命的力量，它让我们变得更好。”</p>
    <p id="love-message" class="love-message">无论发生什么，我都会在你身边，陪伴着你，照顾你，永远爱着你。</p>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/gsap.min.js"></script>
    <script>
        const heart = document.querySelector('.love-heart');
        const message = document.getElementById('love-message');

        heart.addEventListener('click', () => {
            gsap.to(heart, { rotation: 360, duration: 1 });
            gsap.to(message, { opacity: 1, duration: 1, delay: 0.5 });
        });
    </script>
</body>
</html>
